<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    
    <title>post | conci</title>
    <meta name="description" content="伪类和伪元素作为前端搞事情的各位应该常听说，而且也一直在使用着，那他们到底真正的有什么区别呢。下面咱们就说说。 其实在css1和css2中伪类和伪元素没有明确区分开来，从都是使用一个冒号：可了解。但这明显是不对的，所以在css3中对伪类和伪元素无论是概念还是使用方式上都做了明确的区分。从伪类还是使用一个冒号：，但是伪元素是使用两个：可了解。那他们到底怎么区分的呢。 css3之前的伪类和伪元素解释">
<meta name="keywords" content="css,css3">
<meta property="og:type" content="article">
<meta property="og:title" content="伪类和伪元素的区别">
<meta property="og:url" content="http://www.ccblog.win/2017/03/30/伪类和伪元素的区别 - 副本/index.html">
<meta property="og:site_name" content="cc">
<meta property="og:description" content="伪类和伪元素作为前端搞事情的各位应该常听说，而且也一直在使用着，那他们到底真正的有什么区别呢。下面咱们就说说。 其实在css1和css2中伪类和伪元素没有明确区分开来，从都是使用一个冒号：可了解。但这明显是不对的，所以在css3中对伪类和伪元素无论是概念还是使用方式上都做了明确的区分。从伪类还是使用一个冒号：，但是伪元素是使用两个：可了解。那他们到底怎么区分的呢。 css3之前的伪类和伪元素解释">
<meta property="og:updated_time" content="2017-06-01T05:19:35.875Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="伪类和伪元素的区别">
<meta name="twitter:description" content="伪类和伪元素作为前端搞事情的各位应该常听说，而且也一直在使用着，那他们到底真正的有什么区别呢。下面咱们就说说。 其实在css1和css2中伪类和伪元素没有明确区分开来，从都是使用一个冒号：可了解。但这明显是不对的，所以在css3中对伪类和伪元素无论是概念还是使用方式上都做了明确的区分。从伪类还是使用一个冒号：，但是伪元素是使用两个：可了解。那他们到底怎么区分的呢。 css3之前的伪类和伪元素解释">
    
        <link rel="alternate" href="true" title="cc" type="application/atom+xml">
    
    
        <link rel="icon" href="/favicon.ico">
    
    <link rel="stylesheet" href="/css/concise.css">
    <script src="/js/concise.js"></script>
    <script>
        (function(){
            var useragent=navigator.userAgent;
            console.log(navigator,useragent);
            var isM;
            if(useragent.indexOf('iPhone')!=-1){
                isM=true;
            }else if(useragent.indexOf('Android ')!=-1){
                isM=true;
            }else if(useragent.indexOf('iPad')!=-1){
                isM=true;
            }else{
                isM=false;
            }
            if(isM){
                document.documentElement.style.fontSize=document.documentElement.clientWidth/375*100+'px';
                window.onresize=function(){
                    document.documentElement.style.fontSize=document.documentElement.clientWidth/375*100+'px';
                };
            }
        })();
    </script>
    
        <script type="text/javascript" id="hexo.configuration">
            var CONFIG = {
                root: '/',
                algolia: {
                    applicationID: '148WKKLBJ2',
                    apiKey: '1b27867f0ba7ad358543a84d6d30bcb3',
                    indexName: 'test',
                    hits: {
                        per_page: ''
                    },
                    labels: {
                        input_placeholder: '请输入要搜索的字段...',
                        hits_empty: '没有查找到和 「${query}」相关的内容',
                        hits_stats: '总共${hits} 条相关条目，使用了 ${time} 毫秒'
                    }
                }
            };
        </script>
    
    <script src="http://opu30aljn.bkt.clouddn.com/jquery.js"></script>
    
        <script src="http://opu30aljn.bkt.clouddn.com/instantsearch.js"></script>
        <script src="/js/thirdparty/algolia.js"></script>
    
    <script src="/js/script.js"></script>
</head>
<body>
<input type="checkbox" id="left-information">
<div id="wrapper">
    <div id="bgg"></div>
    <header id="header">
    <nav id="nav" class="clearfix">
        <label for="left-information"></label>
        <ul class='nav-left'>
            <li><a href="/">ccblog</a></li>
        </ul>
        <input type="checkbox" id="header-right-nav">
        <ul class="clearfix nav-right">
            
            <li><a href="/">Home</a></li>
            
            <li><a href="/about">About</a></li>
            
            <li><a href="/contact">Contact</a></li>
            
            <li><a href="/archives">Archives</a></li>
            
            <li><a href="/tags">tags</a></li>
            
        </ul>
        <label for="header-right-nav"><i></i></label>
    </nav>
</header>
    <article id="logo">
    <div id="logo-content">
        <header>
            <a href="">cc&#39;s .blog<b>conci</b></a>
        </header>
        <p>
            conci theme 1.0.0<br>
            Simple and practical hexo personal blog theme.<br>
            The freedom to choose
        </p>
    </div>
</article>
    <div id="main" class="clearfix">
        <section id="main-left" class="left">
            <article id="post">
    <h1>伪类和伪元素的区别</h1>
    <p>
        
            <span class="visitors">visitors
                <span id="/2017/03/30/伪类和伪元素的区别 - 副本/" class="leancloud_visitors" data-flag-title="伪类和伪元素的区别">
                    <span class="leancloud-visitors-count">0</span>
                </span>
            </span>&nbsp;&nbsp;•&nbsp;&nbsp;
        
        
            <span class="tag">
                  <a class="article-category-link" href="/categories/css/">css</a>
            </span>&nbsp;&nbsp;•&nbsp;&nbsp;
        
        <span class="date">2017.03.30</span>
    </p>
    <div id="page-post-content">
        <p>伪类和伪元素作为前端搞事情的各位应该常听说，而且也一直在使用着，那他们到底真正的有什么区别呢。下面咱们就说说。</p>
<p>其实在css1和css2中伪类和伪元素没有明确区分开来，从都是使用一个冒号：可了解。但这明显是不对的，所以在css3中对伪类和伪元素无论是概念还是使用方式上都做了明确的区分。从伪类还是使用一个冒号：，但是伪元素是使用两个：可了解。那他们到底怎么区分的呢。</p>
<h3 id="css3之前的伪类和伪元素"><a href="#css3之前的伪类和伪元素" class="headerlink" title="css3之前的伪类和伪元素"></a>css3之前的伪类和伪元素</h3><h4 id="解释"><a href="#解释" class="headerlink" title="解释"></a>解释</h4><blockquote>
<p>先来看看w3c在css3之前对他们的解释<br>CSS 伪类用于向某些选择器添加特殊的效果。<br>CSS 伪元素用于向某些选择器设置特殊效果。<br>好吧，你没看错，他们的解释一样。</p>
</blockquote>
<h4 id="使用方式"><a href="#使用方式" class="headerlink" title="使用方式"></a>使用方式</h4><h4 id="伪类"><a href="#伪类" class="headerlink" title="伪类"></a>伪类</h4><p>比如 :hover, :link, :nth-child(n), :focus, :lang 等<br>伪元素<br>比如 :after, :before, :firste-letter, :first-line<br>你说解释一样，使用一样，怪不得之前好多人对他们分不清，其实这个锅是w3c的。</p>
<h3 id="css3的伪类和伪元素"><a href="#css3的伪类和伪元素" class="headerlink" title="css3的伪类和伪元素"></a>css3的伪类和伪元素</h3><h4 id="解释-1"><a href="#解释-1" class="headerlink" title="解释"></a>解释</h4><p>还是先来看看w3c在css3中对他们的解释</p>
<blockquote>
<p>伪类存在的意义是为了通过选择器找到那些不存在于DOM树中的信息以及不能被常规CSS选择器获取到的信息。</p>
<p>伪元素在DOM树中创建了一些抽象元素，这些抽象元素是不存在于文档语言里的。比如：documen接口不提供访问元素内容的第一个字或者第一行的机制，而伪元素可以使开发者可以提取到这些信息。并且，一些伪元素可以使开发者获取到不存在于源文档中的内容（比如常见的::before,::after）</p>
</blockquote>
<h4 id="伪类-1"><a href="#伪类-1" class="headerlink" title="伪类"></a>伪类</h4><p>概念解读<br>1.找到那些不存在于DOM树中的信息。如：:hover, :link 等悬浮和未被访问的链接的状态就属于不存在于DOM树中的信息。<br>2.不能被常规CSS选择器获取到的信息。如：:target它就属于。</p>
<h4 id="伪元素"><a href="#伪元素" class="headerlink" title="伪元素"></a>伪元素</h4><p>概念解读<br>伪元素是在文档中创建了一个元素，::after, ::before可能更直观也更好理解，::first-line, ::first-letter等可能不是那么直观，但其实照他的解释，::first-line, ::first-letter等也是先创建个元素，然后再把第一行或者第一个字符放进这个容器里，然后就是你给这个容器添加样式了。</p>
<p>其实伪类就是为了1.方便获取元素和2.获取到css无法获取到的状态等信息<br>而伪元素就是给文本中添加一个虚拟的元素，目的是对内容信息进行修饰和辅助</p>
<h4 id="伪类和伪元素区别"><a href="#伪类和伪元素区别" class="headerlink" title="伪类和伪元素区别"></a>伪类和伪元素区别</h4><p>1.伪类使用一个冒号：，伪元素使用两个冒号：<br>2.伪类说白了是为了弥补普通选择器的不足，来获取更多信息，而伪元素目的是对内容信息进行修饰<br>3.伪类可以同时使用多个，伪元素只能使用一个，并且伪元素必须处于选择器语句的最后</p>
<h4 id="注意"><a href="#注意" class="headerlink" title="注意"></a>注意</h4><p>1.伪元素如果要兼容ie8，还是用一个冒号：<br>2.在css3中新加的伪元素必须写两个冒号：</p>
<h4 id="目前伪类和伪元素"><a href="#目前伪类和伪元素" class="headerlink" title="目前伪类和伪元素"></a>目前伪类和伪元素</h4><table>
<thead>
<tr>
<th style="text-align:left">伪类</th>
<th style="text-align:right">伪元素</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">:active</td>
<td style="text-align:right">::after</td>
</tr>
<tr>
<td style="text-align:left">:focus</td>
<td style="text-align:right">::before</td>
</tr>
<tr>
<td style="text-align:left">:hover</td>
<td style="text-align:right">::first-line</td>
</tr>
<tr>
<td style="text-align:left">:link</td>
<td style="text-align:right">::first-letter</td>
</tr>
<tr>
<td style="text-align:left">:visited</td>
<td style="text-align:right">::placeholder</td>
</tr>
<tr>
<td style="text-align:left">:first-child</td>
<td style="text-align:right">::selection</td>
</tr>
<tr>
<td style="text-align:left">:lang</td>
</tr>
<tr>
<td style="text-align:left">。。。</td>
</tr>
</tbody>
</table>
<p>我是来打家劫舍的，还不快速速交出银两。</p>

    </div>
    
        <div id="page-post-tags">
              <a class="article-tag-link" href="/tags/css/">css</a>&nbsp;/&nbsp;<a class="article-tag-link" href="/tags/css3/">css3</a>
        </div>
    
    
        <div id="page-post-reward">
            <label for="page-post-inp">打赏</label>
            <input type="checkbox" id="page-post-inp">
            <ul class="clearfix">
                <li>
                    <a href="javascript:void(0);">
                        <img src="http://ooa3lxrpg.bkt.clouddn.com/wx.jpg?imageView2/2/w/180">
                    </a>
                    <p>微信</p>
                </li>
                <li>
                    <a href="javascript:void(0);">
                        <img src="http://ooa3lxrpg.bkt.clouddn.com/zfb.jpg?imageView2/2/w/180">
                    </a>
                    <p>支付宝</p>
                </li>
            </ul>
        </div>
    
    
<nav id="article-nav" class="clearfix">
  
    <a href="/2017/03/30/伪类和伪元素的区别/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">上一篇</strong>
      <div class="article-nav-title">
        
          
          伪类和伪元素的区别
        
      </div>
    </a>
  
  
    <a href="/2017/04/03/css水平垂直居中/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">下一篇</strong>
      <div class="article-nav-title">
          
          
          css水平垂直居中
          
      </div>
    </a>
  
</nav>

</article>


<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"slide":{"type":"slide","bdImg":"4","bdPos":"left","bdTop":"100"},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到：","viewSize":"32"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>



<div id="cloud-tie-wrapper" class="cloud-tie-wrapper"></div>
<script src="https://img1.cache.netease.com/f2e/tie/yun/sdk/loader.js"></script>
<script>
    var cloudTieConfig = {
        url: document.location.href,
        sourceId: '',
        productKey: '6f0492a87f74476e9df370e5e7ce2270',
        target: 'cloud-tie-wrapper'
    };
    var yunManualLoad = true;
    Tie.loader('aHR0cHM6Ly9hcGkuZ2VudGllLjE2My5jb20vcGMvbGl2ZXNjcmlwdC5odG1s', true);
</script>



        </section>
        <section id="main-right" class="right">
            <div class="my">
    <div class="my-information">
        <div class="my-img">
            <img src="http://ooa3lxrpg.bkt.clouddn.com/b.jpg?imageView2/1/w/120/h/120/q/75" rel="图片">
            <a href="https://github.com/cspp01"></a>
        </div>
        <span>cc</span>
        <p>求知若饥 虚心若愚</p>
    </div>
    <p class="my-social">
        
            <a href="https://github.com/cspp01" class="my-social-me5">github</a>
        
            <a href="/" class="my-social-me2">twitter</a>
        
            <a href="http://weibo.com/5262373626/profile?topnav=1&wvr=6&is_all=1" class="my-social-me2">weibo</a>
        
            <a href="http://douban.com/people/160374034/" class="my-social-me2">豆瓣</a>
        
            <a href="http://www.zhihu.com/people/cc-chen-4-85" class="my-social-me1">知乎</a>
        
    </p>
    <div class="my-post">
        <a href="/archives">
            <strong>19</strong><br>
            <span>posts</span>
        </a>
        <a href="/categories">
            <strong>11</strong><br>
            <span>categories</span>
        </a>
        <a href="/tags">
            <strong>21</strong><br>
            <span>tags</span>
        </a>
    </div>
    <div class="search-rss">
        <div class="my-search">
            <a href="javascript:void(0)" id ='my-search-a' class="popup-trigger">search</a>
        </div>
        
            <div class="my-rss">
                <a href="/atom.xml">rss</a>
            </div>
        
    </div>
    <div class="my-links">
        <ul class="clearfix">
            
            <li>
                <a href="/">
                    <img src="http://ooa3lxrpg.bkt.clouddn.com/timg.jpg">
                    <p>ccblog</p>
                </a>
            </li>
            
            <li>
                <a href="/">
                    <img src="http://ooa3lxrpg.bkt.clouddn.com/timg%20%282%29.jpg">
                    <p>boc</p>
                </a>
            </li>
            
            <li>
                <a href="/">
                    <img src="http://ooa3lxrpg.bkt.clouddn.com/timg%20%283%29.jpg">
                    <p>haha</p>
                </a>
            </li>
            
            <li>
                <a href="/">
                    <img src="http://ooa3lxrpg.bkt.clouddn.com/timg%20%283%29.jpg">
                    <p>pp</p>
                </a>
            </li>
            
            <li>
                <a href="/">
                    <img src="http://ooa3lxrpg.bkt.clouddn.com/timg%20%281%29.jpg">
                    <p>oop</p>
                </a>
            </li>
            
        </ul>
    </div>
    <div class="hot-page">
        
    </div>
</div>
            
            <div id="warehouse"></div>
            
        </section>
    </div>
    <footer id="footer">
    <p>© 2017  cc | <iframe src="https://ghbtns.com/github-btn.html?user=cspp01&repo=cspp01.github.io&type=star&count=true" >
        </iframe><br/>
        concise theme, this world is mine.  | cc'blog | Fork me on Github
        
            | <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1261969111'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s19.cnzz.com/z_stat.php%3Fid%3D1261969111%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));</script>
        
    </p>
</footer>
</div>
<label for="left-information"></label>


    <div class="site-search">
        <div class="algolia-popup popup">
            <div class="algolia-search">
                <div class="algolia-search-input-icon">
                    <i class="fa fa-search"></i>
                </div>
                <div class="algolia-search-input" id="algolia-search-input"></div>
            </div>

            <div class="algolia-results">
                <div id="algolia-stats"></div>
                <div id="algolia-hits"></div>
                <div id="algolia-pagination" class="algolia-pagination"></div>
            </div>

            <span class="popup-btn-close">
          <i class="fa fa-times-circle"></i>
        </span>
        </div>
    </div>


<script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.1.js"></script>
<script>AV.initialize("rRxCAb8Kk2bhhTQJInFKaY4v-gzGzoHsz", "eEp5YWpvXhpv3Jvheh4bHCfG");</script>
<script>
    function showTime(test) {
        var query = new AV.Query(test);
        var entries = [];
        var $visitors = $(".leancloud_visitors");

        $visitors.each(function () {
            entries.push( $(this).attr("id").trim() );
        });

        query.containedIn('url', entries);
        query.find()
            .done(function (results) {
                var COUNT_CONTAINER_REF = '.leancloud-visitors-count';

                if (results.length === 0) {
                    $visitors.find(COUNT_CONTAINER_REF).text(0);
                    return;
                }

                for (var i = 0; i < results.length; i++) {
                    var item = results[i];
                    var url = item.get('url');
                    var time = item.get('time');
                    var element = document.getElementById(url);

                    $(element).find(COUNT_CONTAINER_REF).text(time);
                }
            })
            .fail(function (object, error) {
                console.log("Error: " + error.code + " " + error.message);
            });
    }

    function addCount(test) {
        var $visitors = $(".leancloud_visitors");
        var url = $visitors.attr('id').trim();
        var title = $visitors.attr('data-flag-title').trim();
        var query = new AV.Query(test);

        query.equalTo("url", url);
        query.find({
            success: function(results) {
                if (results.length > 0) {
                    var counter = results[0];
                    counter.fetchWhenSave(true);
                    counter.increment("time");
                    counter.save(null, {
                        success: function(counter) {
                            var $element = $(document.getElementById(url));
                            $element.find('.leancloud-visitors-count').text(counter.get('time'));
                        },
                        error: function(counter, error) {
                            console.log('Failed to save Visitor num, with error message: ' + error.message);
                        }
                    });
                } else {
                    var newcounter = new test();
                    /* Set ACL */
                    var acl = new AV.ACL();
                    acl.setPublicReadAccess(true);
                    acl.setPublicWriteAccess(true);
                    newcounter.setACL(acl);
                    /* End Set ACL */
                    newcounter.set("title", title);
                    newcounter.set("url", url);
                    newcounter.set("time", 1);
                    newcounter.save(null, {
                        success: function(newcounter) {
                            var $element = $(document.getElementById(url));
                            $element.find('.leancloud-visitors-count').text(newcounter.get('time'));
                        },
                        error: function(newcounter, error) {
                            console.log('Failed to create');
                        }
                    });
                }
            },
            error: function(error) {
                console.log('Error:' + error.code + " " + error.message);
            }
        });
    }

    $(function() {
        var test = AV.Object.extend("Counter");
        if ($('.leancloud_visitors').length == 1) {
            addCount(test);
        } else if ($('.leancloud_visitors').length > 1) {
            showTime(test);
        }
    });
</script>



<script>
    (function(){
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        }
        else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>

</body>

<script src="/js/getTitle.js"></script>
    <script>
        $(function(){
            var __warehouse=document.getElementById('warehouse');
            var __content=document.getElementById('post');
            var cus={
                'title':'none',
                'article':__content,
            };
            __warehouse.__newCc(cus);
        });
    </script>

</html>